<script setup>
import { updatePasswordAysnc } from '@/api/user';
import commonForm from '@/components/commonForm.vue';
import useStore from "@/stores";
import { ElMessage } from 'element-plus';
import { onMounted } from 'vue';
const { userStore } = useStore()
const { getUserInfo } = userStore

//表单配置项
const optionList = ref([
  {
    width: '140',
    data: {
      label: '旧密码',
      prop: 'password1',
    },
    component: 'el-input',
    $attrs: {
      placeholder: '请输入旧密码',
      type: 'password',
      'show-password': true
    }
  },
  {
    width: '140',
    data: {
      label: '新密码',
      prop: 'password2',
    },
    component: 'el-input',
    $attrs: {
      placeholder: '请输入修改的新密码',
      type: 'password',
      'show-password': true
    }
  },
  {
    width: '140',
    data: {
      label: '确认新密码',
      prop: 'password3',
    },
    component: 'el-input',
    $attrs: {
      placeholder: '请输入再次修改的新密码',
      type: 'password',
      'show-password': true
    }
  },

])

//表单回显数据
const optionData = ref({})

//表单校验规则
const optionRuleList = ref({
  password1: [
    {
      required: true, message: '请输入旧密码！', trigger: 'blur'
    }
  ],
  password2: [
    {
      required: true,
      validator: (rule, value, callback) => {
        if (!value) return
        const reg = /^(?=.{6,16})(?=.*\d)(?=.*[A-Za-z]).*$/
        if (!reg.test(value)) {
          callback(new Error('新密码长度在6-16位且包含字母和数字!'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ],
  password3: [
    {
      required: true,
      validator: (rule, value, callback) => {
        if (!value) {
          callback(new Error('请再次确认新密码！'))
        } else if (!formData.value.password2) {
          callback(new Error('请先输入新密码，然后再次确认新密码！'))
        } else if (formData.value.password2 !== value) {
          callback(new Error('两次输入的密码不一致！'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ],


})
//表单
const formRef = ref(null)
//变化数据
const formData = ref({})
const updateFormData = (data) => {
  formData.value = data
}



//重置恢复表单
const handleReset = () => {
  formRef.value.resetForm()
}

//更新密码
const updatePassword = async () => {
  try {
    const params = {
      ...formData.value
    }
    const res = await updatePasswordAysnc(params)
    if (res && res.code + '' === '200') {
      ElMessage.success('成功修改密码！')
      handleReset()
    }
  } catch (error) {
    console.log('%c [ error ]-181', 'font-size:13px; background:pink; color:#bf2c9f;', error)

  }
}



</script>


<template>
  <div class="user-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>密码修改</span>
        </div>
      </template>

      <commonForm ref="formRef" :optionList="optionList" :optionRuleList="optionRuleList" :optionData="optionData"
        @updateFormData="updateFormData">
      </commonForm>

      <template #footer>
        <div class="card-footer">
          <el-button class="btn-reset" type="primary" @click="handleReset">
            重置
          </el-button>
          <el-button class="btn-save" type="primary" @click="updatePassword">
            确认修改
          </el-button>
        </div>
      </template>
    </el-card>
  </div>
</template>

<style lang="scss" scoped>
.user-container {
  height: 100%;

  :deep(.el-button) {
    font-size: 16px;
    font-weight: 700;
    width: 100px;
    color: #fff;
    border: 0px;
  }

  :deep(.el-card) {
    max-width: 500px;
    min-width: 400px;

    .card-header {
      text-align: center;
      font-weight: 700;
      font-size: 20px;
      letter-spacing: 2px;
      color: #717171
    }

    .card-footer {
      display: flex;
      justify-content: center;



      .btn-reset {
        background-color: #6ca9bb;
        transition: all 0.3s;

        &:hover {
          background-color: #7dd9eb;

        }
      }

      .btn-save {
        background-color: #7dbb6c;
        transition: all 0.3s;

        &:hover {
          background-color: #8fdf3a;
        }
      }

    }
  }

  :deep(.el-input),
  :deep(.el-select),
  :deep(.el-input-number) {
    width: 240px;
  }

  :deep(.form-container) {
    margin: 0 auto
  }

}
</style>